<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/demo3.css">
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/jquery-sticklr.css"/>
<script src="js/jquery.js"></script>
<!--引入bev入口脚本-->
<script src="js/bevInclude.js"></script>
<!--引入SuperMap iClient For JavaScript类库-->
<script src="../libs/SuperMap.Include.js"></script>
<!--引入SuperMap iClient For JavaScript 态势标会类库-->
<!--<script src="../iClientJavaScriptPlottingSymbols/PlottingSymbols.Include.js"></script>-->
<!--<script src="../iClientJavaScriptPlottingSymbols.js"></script>-->
<script src="../iClientJavaScriptPlottingSymbols-min.js"></script>
<script src="js/demo3.js"></script>
<script type="text/javascript" src="js/jquery-sticklr.js"></script>
<style type="text/css">

    #menuPlotting {
        left: 40px;
    }
</style>
<script>

var map, layer0, plottingLayer,plottingEdit;
var drawGeoPoint,drawGeoMultiPoint,
        drawGeoPolyline,drawGeoArc,drawGeoFreeline,drawGeoBizer2,drawGeoBizer3,drawGeoBizerN,drawGeoCardinalCurve,
        drawGeoCircle,drawGeoEllipse,drawGeoSector,drawGeoLune,drawGeoRectangle,drawGeoPolygon,drawGeoFreePolygon,drawGeoGatheringPlace,drawGeoRoundedRect,drawGeoCloseCurve,
        drawGeoCurveFlag,drawGeoRectFlag,drawGeoTriangleFlag,
        drawGeoStraightArrow,drawGeoDiagonalArrow,drawGeoDoubleArrow,drawGeoDoveTailStraightArrow,drawGeoDoveTailDiagonalArrow,
        drawGeoPolylineArrow,drawGeoParallelSearch,drawGeoSectorSearch,drawGeoBezierCurveArrow,drawGeoCardinalCurveArrow;
function init() {
    setLogoImg("1,logo.png")
    setLogoTitle("1,JavaScript 态势标绘")
    Bev.Theme.set("bev-base");
    initDemo();
    window.center = new SuperMap.LonLat(7724209,3228485);
    window.zoom = 3;
    window.mapControlList = getMapControlList("1,2,3,4,5", 3);

    window.overlayParams = [];
     createMap("supermapCloud",null);

    addMeasure(1);
    addGeolocate(1);
    addDraw(0);
    addMapPrint(1);
    bindMenu2Nav(nav, baseToolsMenu, "tool-icon-20", "基本操作");

    window.setTimeout(function () {
        plottingLayer = new SuperMap.Layer.Vector("plottingLayer");
        window.map.addLayers([plottingLayer]);
        addMenuPlotting();
    }, 2000);

}
//态势标绘
function addMenuPlotting() {
    $(document).ready(function () {
        $('#menuPlotting').sticklr({
            showOn: 'hover',
            stickTo: 'left'
        });
    });

    plottingLayer.style = {
        fillColor: "#66cccc",
        fillOpacity: 0.4,
        strokeColor: "#66cccc",
        strokeOpacity: 1,
        strokeWidth: 3,
        pointRadius:6

    };
    var stylePoint={
        fillColor: "#323232",
        fillOpacity: 0.4,
        strokeColor: "#323232",
        strokeOpacity: 0.8,
        strokeWidth: 15,
        strokeDashstyle: "dash"

    };
    var styleMultiPoint={
        fillColor: "#323232",
        fillOpacity: 1,
        strokeColor: "#323232",
        strokeOpacity: 1,
        strokeWidth: 1,
        pointRadius:8
    };
    var styleFlag={
        fillColor: "#EA2D1B",
        fillOpacity: 1,
        strokeColor: "#EA2D1B",
        strokeOpacity: 1,
        strokeWidth: 2
    };

//    态势标绘编辑
    plottingEdit = new SuperMap.Control.PlottingEdit(plottingLayer);
    // 点标
    drawGeoPoint = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.PointEx,{style:stylePoint});
    drawGeoMultiPoint = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.MultiPointEx,{style:styleMultiPoint});
    // 线标
    drawGeoPolyline = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.PolyLineEx);
    drawGeoArc = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.ArcEx);
    drawGeoFreeline = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.FreelineEx);
    drawGeoBizer2 = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.BezierCurve2Ex);
    drawGeoBizer3 = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.BezierCurve3Ex);
    drawGeoBizerN = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.BezierCurveNEx);
    drawGeoCardinalCurve = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.CardinalCurveEx);
    //面标
    drawGeoCircle = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.CircleEx);
    drawGeoEllipse = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.EllipseEx);
    drawGeoSector = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.Sector);
    drawGeoLune = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.Lune);
    drawGeoRectangle = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.Rectangle);
    drawGeoPolygon = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.PolygonEx);
    drawGeoFreePolygon = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.FreePolygon);
    drawGeoGatheringPlace = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.GatheringPlace);
    drawGeoRoundedRect = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.RoundedRect);
    drawGeoCloseCurve = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.CloseCurve);
    //旗标
    drawGeoCurveFlag = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.CurveFlag,{style:styleFlag});
    drawGeoRectFlag = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.RectFlag,{style:styleFlag});
    drawGeoTriangleFlag = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.TriangleFlag,{style:styleFlag});
    //面状箭标
    drawGeoStraightArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.StraightArrow);
    drawGeoDiagonalArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.DiagonalArrow);
    drawGeoDoubleArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.DoubleArrow);
    drawGeoDoveTailStraightArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.DoveTailStraightArrow);
    drawGeoDoveTailDiagonalArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.DoveTailDiagonalArrow);
    //线状箭标
    drawGeoPolylineArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.PolylineArrow);
    drawGeoParallelSearch = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.ParallelSearch);
    drawGeoSectorSearch = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.SectorSearch);
    drawGeoBezierCurveArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.BezierCurveArrow);
    drawGeoCardinalCurveArrow = new SuperMap.Control.DrawFeature(plottingLayer, SuperMap.Handler.CardinalCurveArrow);
//    添加态势标绘控件
    window.map.addControls([plottingEdit,drawGeoPoint,drawGeoMultiPoint,
        drawGeoPolyline,drawGeoArc,drawGeoFreeline,drawGeoBizer2,drawGeoBizer3,drawGeoBizerN,drawGeoCardinalCurve,
        drawGeoCircle,drawGeoEllipse,drawGeoSector,drawGeoLune,drawGeoRectangle,drawGeoPolygon,drawGeoFreePolygon,drawGeoGatheringPlace,drawGeoRoundedRect,drawGeoCloseCurve,
        drawGeoCurveFlag,drawGeoRectFlag,drawGeoTriangleFlag,
        drawGeoStraightArrow,drawGeoDiagonalArrow,drawGeoDoubleArrow,drawGeoDoveTailStraightArrow,drawGeoDoveTailDiagonalArrow,
        drawGeoPolylineArrow,drawGeoParallelSearch,drawGeoSectorSearch,drawGeoBezierCurveArrow,drawGeoCardinalCurveArrow]);
}
//取消标绘与编辑
function plottingAllDeactivate() {
    plottingEdit.deactivate();
    drawGeoPoint.deactivate();
    drawGeoMultiPoint.deactivate();
    drawGeoPolyline.deactivate();
    drawGeoArc.deactivate();
    drawGeoFreeline.deactivate();
    drawGeoBizer2.deactivate();
    drawGeoBizer3.deactivate();
    drawGeoBizerN.deactivate();
    drawGeoCardinalCurve.deactivate();
    drawGeoCircle.deactivate();
    drawGeoEllipse.deactivate();
    drawGeoSector.deactivate();
    drawGeoLune.deactivate();
    drawGeoRectangle.deactivate();
    drawGeoPolygon.deactivate();
    drawGeoFreePolygon.deactivate();
    drawGeoGatheringPlace.deactivate();
    drawGeoRoundedRect.deactivate();
    drawGeoCloseCurve.deactivate();
    drawGeoCurveFlag.deactivate();
    drawGeoRectFlag.deactivate();
    drawGeoTriangleFlag.deactivate();
    drawGeoStraightArrow.deactivate();
    drawGeoDiagonalArrow.deactivate();
    drawGeoDoubleArrow.deactivate();
    drawGeoDoveTailStraightArrow.deactivate();
    drawGeoDoveTailDiagonalArrow.deactivate();
    drawGeoPolylineArrow.deactivate();
    drawGeoParallelSearch.deactivate();
    drawGeoSectorSearch.deactivate();
    drawGeoBezierCurveArrow.deactivate();
    drawGeoCardinalCurveArrow.deactivate();
}
//点标
function plottingDrawGeoPoint() {
    plottingAllDeactivate();
    drawGeoPoint.activate();
}
function plottingDrawGeoMultiPoint() {
    plottingAllDeactivate();
    drawGeoMultiPoint.activate();
}
//线标
function plottingdrawGeoPolyline() {
    plottingAllDeactivate();
    drawGeoPolyline.activate();
}
function plottingDrawGeoArc() {
    plottingAllDeactivate();
    drawGeoArc.activate();
}
function plottingDrawGeoFreeline() {
    plottingAllDeactivate();
    drawGeoFreeline.activate();
}
function plottingDrawGeoBizer2() {
    plottingAllDeactivate();
    drawGeoBizer2.activate();
}
function plottingDrawGeoBizer3() {
    plottingAllDeactivate();
    drawGeoBizer3.activate();
}
function plottingDrawGeoBizerN() {
    plottingAllDeactivate();
    drawGeoBizerN.activate();
}
function plottingDrawGeoCardinalCurve() {
    plottingAllDeactivate();
    drawGeoCardinalCurve.activate();
}
function plottingdrawGeoCircle() {
    plottingAllDeactivate();
    drawGeoCircle.activate();
}
function plottingDrawGeoEllipse() {
    plottingAllDeactivate();
    drawGeoEllipse.activate();
}
function plottingDrawGeoSector() {
    plottingAllDeactivate();
    drawGeoSector.activate();
}
function plottingDrawGeoLune() {
    plottingAllDeactivate();
    drawGeoLune.activate();
}
function plottingDrawGeoRectangle() {
    plottingAllDeactivate();
    drawGeoRectangle.activate();
}
function plottingDrawGeoPolygon() {
    plottingAllDeactivate();
    drawGeoPolygon.activate();
}
function plottingDrawGeoFreePolygon() {
    plottingAllDeactivate();
    drawGeoFreePolygon.activate();
}
function plottingDrawGeoGatheringPlace() {
    plottingAllDeactivate();
    drawGeoGatheringPlace.activate();
}
function plottingDrawGeoRoundedRect() {
    plottingAllDeactivate();
    drawGeoRoundedRect.activate();
}
function plottingDrawGeoCloseCurve() {
    plottingAllDeactivate();
    drawGeoCloseCurve.activate();
}
//旗标
function plottingdrawGeoCurveFlag() {
    plottingAllDeactivate();
    drawGeoCurveFlag.activate();
}
function plottingDrawGeoRectFlag() {
    plottingAllDeactivate();
    drawGeoRectFlag.activate();
}
function plottingDrawGeoTriangleFlag() {
    plottingAllDeactivate();
    drawGeoTriangleFlag.activate();
}
//箭标
function plottingdrawGeoStraightArrow() {
    plottingAllDeactivate();
    drawGeoStraightArrow.activate();
}
function plottingDrawGeoDiagonalArrow() {
    plottingAllDeactivate();
    drawGeoDiagonalArrow.activate();
}
function plottingDrawGeoDoubleArrow() {
    plottingAllDeactivate();
    drawGeoDoubleArrow.activate();
}
function plottingDrawGeoDoveTailStraightArrow() {
    plottingAllDeactivate();
    drawGeoDoveTailStraightArrow.activate();
}
function plottingDrawGeoDoveTailDiagonalArrow() {
    plottingAllDeactivate();
    drawGeoDoveTailDiagonalArrow.activate();
}
function plottingdrawGeoPolylineArrow() {
    plottingAllDeactivate();
    drawGeoPolylineArrow.activate();
}
function plottingDrawGeoParallelSearch() {
    plottingAllDeactivate();
    drawGeoParallelSearch.activate();
}
function plottingDrawGeoSectorSearch() {
    plottingAllDeactivate();
    drawGeoSectorSearch.activate();
}
function plottingDrawGeoBezierCurveArrow() {
    plottingAllDeactivate();
    drawGeoBezierCurveArrow.activate();
}
function plottingDrawGeoCardinalCurveArrow() {
    plottingAllDeactivate();
    drawGeoCardinalCurveArrow.activate();
}
//清空绘制
function PlottingClear(){
    plottingAllDeactivate();
    plottingLayer.removeAllFeatures();
}
//取消标绘，激活标绘编辑控件
function PlottingDrawCancel(){
    plottingAllDeactivate();
    plottingEdit.activate();
}
function setLogoImg(paraStr) {
    if (paraStr) {
        var tp = paraStr.split(",");
        var isSelect = tp[0];
        var imgSrc = tp[1];

        if (isSelect == "1") {
            $("#logoImg").css({
                "display": "inline"
            })
                    .attr({
                        "src": "img/" + imgSrc
                    });
        }
        else {
            $("#logoImg").css({
                "display": "none"
            });
        }
    }
}

function setLogoTitle(paraStr) {
    if (paraStr) {
        var tp = paraStr.split(",");
        var isSelect = tp[0];
        var text = tp[1];

        $("#logoTitle").html(text).css({
            "display": (isSelect == "1") ? "inline" : "none"
        });
        document.title = text;
    }
}
</script>


</head>
<body onload="init()" style="position: absolute;height: 100%;width: 100%;">
<div id="head1">
    <span id="logo" class="head_child bev-logo"><img id="logoImg" style="display: none;height:56px;"/><span
            id="logoTitle"></span></span>
</div>
<div id="canvas">
    <div id="plotting" style="z-index: 999">
        <ul id="menuPlotting" class="sticklr">
            <li>
                <a class="glyphicon plotting-lyphicon-draw-point" title="绘制点标"></a>
                <ul>
                    <li class="sticklr-title"><span>绘制点标</span></li>
                    <li><input type="button" value="点" onclick="plottingDrawGeoPoint()"
                               style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="多点" onclick="plottingDrawGeoMultiPoint()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                </ul>
            </li>
            <li>
                <a class="glyphicon plotting-glyphicon-draw-line" title="绘制线标"></a>
                <ul>
                    <li class="sticklr-title"><span>绘制线标</span></li>
                    <li><input type="button" value="折线" onclick="plottingdrawGeoPolyline()"
                               style="width:70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="圆弧" onclick="plottingDrawGeoArc()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="自由线" onclick="plottingDrawGeoFreeline()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="贝塞尔2次曲线" onclick="plottingDrawGeoBizer2()"
                               style="width: 100px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="贝塞尔3次曲线" onclick="plottingDrawGeoBizer3()"
                               style="width: 100px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="贝塞尔N次曲线" onclick="plottingDrawGeoBizerN()"
                               style="width: 100px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="Cardinal曲线" onclick="plottingDrawGeoCardinalCurve()"
                               style="width: 100px;height: 25px ;margin:0 auto;"> </input></li>
                </ul>
            </li>
            <li>
                <a class="glyphicon plotting-glyphicon-draw-polygon" title="绘制面标"></a>
                <ul>
                    <li class="sticklr-title"><span>绘制面标</span></li>
                    <li><input type="button" value="圆" onclick="plottingdrawGeoCircle()"
                               style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="椭圆" onclick="plottingDrawGeoEllipse()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="扇形" onclick="plottingDrawGeoSector()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="弓形" onclick="plottingDrawGeoLune()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="矩形" onclick="plottingDrawGeoRectangle()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="多边形" onclick="plottingDrawGeoPolygon()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="手绘面" onclick="plottingDrawGeoFreePolygon()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="聚集区" onclick="plottingDrawGeoGatheringPlace()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="圆角矩形" onclick="plottingDrawGeoRoundedRect()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="闭合曲线" onclick="plottingDrawGeoCloseCurve()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                </ul>
            </li>
            <li>
                <a class="glyphicon plotting-glyphicon-draw-flag" title="绘制旗标"></a>
                <ul>
                    <li class="sticklr-title"><span>绘制旗标</span></li>
                    <li><input type="button" value="曲线旗标" onclick="plottingdrawGeoCurveFlag()"
                               style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="直角旗标" onclick="plottingDrawGeoRectFlag()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="三角旗标" onclick="plottingDrawGeoTriangleFlag()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                </ul>
            </li>
            <li>
                <a class="glyphicon plotting-glyphicon-draw-arrow" title="绘制箭标"></a>
                <ul>
                    <li class="sticklr-title"><span>面状箭标</span></li>
                    <li><input type="button" value="直箭头" onclick="plottingdrawGeoStraightArrow()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="斜箭头" onclick="plottingDrawGeoDiagonalArrow()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="双箭头" onclick="plottingDrawGeoDoubleArrow()"
                               style="width: 70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="燕尾直箭头" onclick="plottingDrawGeoDoveTailStraightArrow()"
                               style="width: 80px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="燕尾斜箭头" onclick="plottingDrawGeoDoveTailDiagonalArrow()"
                               style="width: 80px;height: 25px ;margin:0 auto;"> </input> </li>
                </ul>
                <ul>
                    <li class="sticklr-title"><span>线状箭标</span></li>
                    <li><input type="button" value="折线箭头" onclick="plottingdrawGeoPolylineArrow()"
                               style="width:70px;height: 25px ;margin:0 auto;"> </input> </li>
                    <li><input type="button" value="平行搜寻区" onclick="plottingDrawGeoParallelSearch()"
                               style="width: 80px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="扇形搜寻区" onclick="plottingDrawGeoSectorSearch()"
                               style="width: 80px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="贝塞尔曲线箭头" onclick="plottingDrawGeoBezierCurveArrow()"
                               style="width: 105px;height: 25px ;margin:0 auto;"> </input></li>
                    <li><input type="button" value="Cardinal曲线箭头" onclick="plottingDrawGeoCardinalCurveArrow()"
                               style="width: 110px;height: 25px ;margin:0 auto;"> </input></li>
                </ul>
            </li>
            <li>
                <a  class="glyphicon plotting-glyphicon-draw-deactivate notArrow" title="取消绘制" onclick="PlottingDrawCancel()"></a>
            </li>
            <li>
                <a  class="glyphicon plotting-glyphicon-draw-removeAll notArrow" title="清除" onclick="PlottingClear()"></a>
            </li>
        </ul>
    </div>
    <div id="mapContainer"></div>
    <span id="toolbar"></span>
</div>
</body>
<script type="text/javascript">
    (function () {//控制页面的自适应
        window.resizeFunctions = [];
        var a = function () {
            var b = document.body;
            var a = b.clientHeight;
            var w = b.clientWidth;
            var c = window.resizeFunctions;
            for (var i = 0; i < c.length; c++) {
                if (c[i]) {
                    try {
                        c[i]();
                    } catch (e) {
                    }
                }
            }
            var d = document.getElementById("canvas");
//            var d1 = document.getElementById("mapContainer");
            d.style.height = (a - 80) + "px";//d1.style.height =
            d.style.width = ( w - 40) + "px";//d1.style.width =
        }
        a();
        if (window.addEventListener) {
            window.addEventListener("resize", a);
        }
        else {
            window.attachEvent("onresize", a);
        }
    })();
</script>
</html>
